<template>
  <main class="user-login-page">
    <div class="user-login-top">
      <img :src="iconlogo" alt="" width="105px" height="105px" />
      <div class="user-login-name">丰码智控</div>

      <div class="user-login-main">
        <nut-input placeholder="请输入" v-model="state.loginCode" />
        <nut-input placeholder="请输入密码" v-model="state.password" type="password" />
        <div class="user-login-bottom">
          <nut-checkbox v-model="state.checkbox">
            <div class="agree-text">我已阅读并同意</div>
          </nut-checkbox>
          <span class="agree-link" @click="toxieyi">《数据采集协议服务》</span>
          <!-- <div>忘记密码?</div> -->
          <div></div>
        </div>
        <div class="user-login-box">
          <nut-button block type="primary" @click="handleLogin">登录</nut-button>
        </div>
        <!-- <div class="user-login-box">
                <p>其他登录方式</p>
                <nut-icon size="40" :name="iconWchat" @click="codeToLogin"></nut-icon>
                <p>没有账号，请联系管理员</p>
            </div> -->
      </div>
    </div>
  </main>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { computed, reactive } from 'vue'
import { useStore } from '@/stores'
import { login, openIdLogin } from '@/services/apis/user'
import { useLoad, useDidShow } from '@tarojs/taro'
import { Toast } from '@nutui/nutui'
const iconWchat = require('@/assets/icons/icon-wechat.svg')
const iconlogo = require('@/assets/icons/logo_v2.png')

const state = reactive({
  loginCode: '',
  password: '',
  wxOpenid: '',
  checkbox: false
})
const auth = useStore('auth')
const isLogin = computed(() => auth.isLogin)

const loginOut = () => {
  Taro.setStorageSync('token', '')
  auth.logout()
}
useLoad(() => {
  // codeToLogin()
})
useDidShow(() => {
  state.wxOpenid = Taro.getStorageSync('openid')
})

// const codeToLogin = () => {
//   wx.login().then(data => {
//     openIdLogin(data.code).then(data => {
//       state.wxOpenid = data.openid
//       Taro.setStorageSync('openid', data.openid)
//       if (data.token) {
//         Taro.setStorageSync('token', data.token)
//         auth.setUserInfo({
//           nickName: data.userName,
//           avatarUrl: 'https://fmzk.harvest-code.com/api' + data.avatarUrl
//         })
//         auth.login()
//         Taro.switchTab({ url: `/pages/create/index` })
//       }
//     })
//   })
// }
const handleLogin = () => {
  if (!state.loginCode) {
    wx.showToast({
      title: '用户名不能为空！',
      icon: 'none',
      duration: 2000
    })
    return
  }
  if (!state.password) {
    wx.showToast({
      title: '密码不能为空！',
      icon: 'none',
      duration: 2000
    })
    return
  }
  if (!state.checkbox) {
    wx.showToast({
      title: '请同意数据采集协议',
      icon: 'none',
      duration: 2000
    })
    return
  }
  wx.login().then(data => {
    openIdLogin(data.code).then(data => {
      Taro.setStorageSync('openid', data.openid)
      state.wxOpenid = data.openid
      login({
        loginCode: state.loginCode,
        password: state.password,
        wxOpenid: state.wxOpenid
      }).then(data => {
        if ((data.result = 'true' && data.token)) {
          Taro.setStorageSync('token', data.token)
          auth.setUserInfo({
            nickName: data.userName,
            avatarUrl: 'https://fmzk.harvest-code.com/api' + data.avatarUrl
          })
          auth.login()
          Taro.reLaunch({ url: `/pages/create/index` })
        } else {
          wx.showToast({
            title: data.message,
            icon: 'none',
            duration: 2000
          })
        }
      })
    })
  })
}

const toxieyi = () => {
  Taro.navigateTo({ url: `/pagesSub/my/xieyi/index` })
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
.user-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: $green-background;
  z-index: 0;
}
.user-page_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #f6f6f6;
  z-index: 0;
}
.my-container {
  padding: 0 15px;
  .nut-cell-group__warp {
    margin: 0 10px;
    display: block;
    border-radius: 12rpx;
    overflow: hidden;
    background: #fff;
  }
  .nut-cell {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.user-login-box {
  position: relative;
  padding: 60px 0 0 0;
  text-align: center;
  .nut-button {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
  }
  p {
    line-height: 20px;
    font-size: $font-size-1;
    color: #fff;
  }
}
.user-login-main {
  margin-top: -55px;
  padding: 95px 20px 0 20px;
  border-radius: 20px;
  background: #ffffff;
}
.user-login-top {
  position: relative;
  margin: 0 auto;
  padding-top: 96px;
  text-align: center;
  overflow: hidden;
}
.user-login-name {
  margin-top: 15px;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
  color: #499d2f;
}
.user-login-page {
  background: url(../../assets/icons/login-top-bg.png) no-repeat;
  background-size: 100% auto;
  .nut-placeholder {
    color: #8a90a3;
  }
  .nut-input {
    margin-bottom: 16px;
    padding: 11px 20px;
    border: 1px solid #c8ccd8;
    border-radius: 32px;
    background: none;
    color: #000;
    .input-text {
      color: #000;
    }
    .input-text::placeholder {
      color: #8a90a3;
      -webkit-text-fill-color: #8a90a3;
    }
  }
}
.user-login-bottom {
  position: relative;
  padding: 10px 5px;
  display: flex;
  color: #8a90a3;
  font-size: $font-size-1;
  align-items: center;
  z-index: 10;
  .nut-checkbox {
    display: flex;
    margin-right: 0px;
    .nut-checkbox__label {
      color: #8a90a3;
      margin-left: 5px;
    }
  }
  .agree-text {
    font-size: 12px;
    flex: 1;
    text-align: left;
    color: #8a90a3;
  }
  .agree-link {
    color: #499d2f;
    display: inline;
  }
}
</style>
